<template>
	<view>
		<view class="label_list" v-if="is_user_recommend_popup">
			<view class="label_list_content">
				<view class="colse_user_popup" @click="close">
					<image :src="domain + '/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png'" />
				</view>
				<swiper class="swiper" circular autoplay v-if="type == 1"> 
					<swiper-item v-for="(item, index) in list" :key="index" style="height: fit-content">
						<view class="list_user_item" >
							 <!-- @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)" -->
							<view class="list_user_avatar" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)"><img :src="item.author ? item.author.avatar : '/static/images/f.png'" /></view>
							<view class="list_user_nickname line1" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)">{{item.author.nickname}}</view>
							<view class="list_user_label line1" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)">{{item.label.label_name}}</view>
							<view class="list_user_demand line3" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)">{{item.content}}</view>
							<view class="list_user_follow" @click.stop="goCommunity(item)">接单</view>
							<view class="list_user_follow" @click.stop="goUrl('/pages/extends/community/community_demand?label_id='+item.label_id)" style="background-color: #B1F7C3;font-weight: unset;">查看更多订单</view>
							<!-- <view class="list_user_follow" v-if="!item.is_start" @click.stop="followAuthor(index, 1)">关注</view>
							<view class="list_user_follow" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)" v-else>已关注</view> -->
						</view>
					</swiper-item>
				</swiper>
				<view class="user-push-content" v-if="type == 2">
					<view class="user-push-tit">推送客户</view>
					<view class="user-push-tip">每月推送10位以上客户订单</view>
					<view class="user-push-list">
						<view class="user-push-info" v-for="(item, index) in list" :key="index" v-if="index <= 7">
							<view class="user-push-avatar"  @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)">
								<img :src="item.author ? item.author.avatar : '/static/images/f.png'" />
							</view>
							<view class="user-push-name">{{item.author.nickname}}</view>
						</view>
					</view>
					<view class="user-push-btn"  @click="goUrl('/pages/annex/vip_paid/index')">我要获客</view>
				</view>
				<swiper class="recommend-user-wx-swiper" circular autoplay v-if="type == 3">
					<swiper-item  class="recommend-user-wx-swiper-item" v-for="(item, index) in list" :key="index">
						<view class="recommend-user-wx-content">
							<view class="recommend-user-wx-avatar" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)">
								<img :src="item.author.avatar" />
							</view>
							<view class="recommend-user-wx-name line1" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)">{{item.author.nickname}}</view>
							<view class="recommend-user-wx-label" @click="goUrl('/pages/plantGrass/plant_user/index?id='+item.uid)">{{item.label.label_name}}</view>
							<view class="recommend-user-wx-add" @click="getUserContactInformations(item, 'we_chat_account', 1)">加微信</view>
							<view class="recommend-user-wx-more" @click="goUrl('/pages/extends/user/recommend_user')">更多客户微信</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<!-- 手机号微信查看弹窗 -->
		<view class="popup_user_contact" v-if="is_popup_user_contact" @click="is_popup_user_contact=false">
			<view class="popup_user_contact_c">
				<view class="popup_user_contact_h">
					<view class="popup_user_contact_t">提示</view>
					<view class="popup_user_contact_u">{{popup_user_contact_type == 'phone' ? '电话：' : '微信号：'}}<text>{{popup_user_contact}}</text></view>
				</view>
				<view class="popup_user_contact_b">
					<view class="popup_user_contact_close" @click="is_popup_user_contact=false">取消</view>
					<view class="popup_user_contact_copy" @click="copyUserContact">复制</view>
				</view>
			</view>
		</view>
		
		<!-- 升级VIP弹窗 -->
		<view class="user_vip_tips" v-if="user_vip_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content">
				<view class="user_vip_close" @click="user_vip_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_icon">
					<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
				</view>
				<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
				<view class="user_vip_messag">更多权益请在 “我的” 会员中心查看</view>
				<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
			</view>
		</view>
		<view class="back_popup flex-aj-center" @click="wechat_qrcode_img = ''" v-if="wechat_qrcode_img">
			<image :src="wechat_qrcode_img" style="width: 500rpx;border-radius: 20rpx;" mode="widthFix" @click="previewImage(wechat_qrcode_img)">
		</view>
	</view>
</template>

<script>
	import {  followAuthorApi } from '@/api/community.js';
	import { getUserContactInformation } from '@/api/user.js';
	import { mapGetters } from "vuex";
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
	export default {
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				popup_user_contact: '',
				is_popup_user_contact: false,
				popup_user_contact_type: '',
				user_vip_tips: false, // 提醒用户开启VIP弹窗
				type: 3,
				wechat_qrcode_img: '', // 微信二维码
			}
		},
		props: {
			is_user_recommend_popup: {
				type: Boolean,
				default: false,
			},
			list: {
				type: Array,
				default: () => []
			},
		},
		computed: configMap({}, mapGetters(['isLogin', 'viewColor', 'keyColor'])),
		watch: {
			is_user_recommend_popup(newValue, oldValue) {
				if (newValue == true) {
					this.type = 3;
				}
			}
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions :{
						itemList:['保存图片']
					},
				})
			},
			close() {
				if (this.type == 3) {
					this.type = 1;
				} else if (this.type == 1) {
					this.type = 2;
				} else {
					this.$emit('closeUserRecommendPopup');
				}
			},
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			// 需求详情
			goCommunity(data) {
				let that = this;
				that.$util.Tips('/pages/plantGrass/demand_detail/index?id='+data.community_id)
			},
			// 关注作者
			followAuthor: function(key, status) {
				if (this.isLogin === false) {
					this.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'})
				} else {
					let that = this;
					followAuthorApi(that.list[key].uid,{status: status}).then(res => {
						if (res.status === 200) {
							that.list[key].is_start = status
						}
						that.$util.Tips({
							title: res.message
						});
					}).catch(err=>{
						that.$util.Tips({
							title: err
						});
					});
				}
			},
			/**
			 * 查看会员联系方式
			 * @param {Object} uid
			 * @param {Object} contact_information
			 */
			getUserContactInformations(data, contact_information, is_weixin = 0) {
				if(!this.isLogin) return this.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/user/index'});
				let that = this;
				let uid = data.uid;
				if (!uid) return this.$util.Tips({title: '缺少请求用户'});
				getUserContactInformation({uid, contact_information, is_weixin}).then(res=>{
					if(contact_information == 'phone' && checkPhone(res.message)) {
						return uni.makePhoneCall({
							phoneNumber: res.message // 替换为你想拨打的电话号码
						  }).then(() => {
							console.log('拨打电话成功')
						  }).catch((error) => {
							console.log('拨打电话失败', error)
						  })
					} else {
						if (res.data && res.data.is_img == 1) {
							that.wechat_qrcode_img = res.data.data;
						} else {
							if (res.message) {
								that.popup_user_contact = res.message || '暂未设置该联系方式'
								that.popup_user_contact_type = contact_information;
								that.is_popup_user_contact = true;
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '等待对方验证',
									showCancel: false,
								})
							}
						}
					}
				}).catch(err=>{
					if(err == '次数不足') {
						that.user_vip_tips = true;
						// that.pay_close = true;
					} else {
						that.$util.Tips({title: err});
					}
				})
			},
			copyUserContact() {
				let that = this;
				that.is_popup_user_contact = false;
				if(this.popup_user_contact && this.popup_user_contact!='暂未设置该联系方式') {
					uni.setClipboardData({
					  data: that.popup_user_contact,
					  success: function () {
						return that.$util.Tips({title:'复制成功'});
					  }
					})
				}else{
					return this.$util.Tips({title:'复制失败'});
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
.label_list {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 31;
	display: flex;
	align-items: center;
	justify-content: center;
	.label_list_content {
		/* position: fixed;
		top: 360rpx;
		left: 120rpx;
		right: 120rpx; */
		width: 480rpx;
		height: 660rpx;
		padding: 30rpx;
		overflow-y: auto;
		background-color: #fff;
		box-shadow: 0rpx 10rpx 28rpx 0rpx rgba(141, 138, 127, 0.1);
		border-radius: 24rpx;
		text-align: center;
		position: relative;
		.colse_user_popup {
			width: 70rpx;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 1;
			image {
				width: 70rpx;
				height: 70rpx;
			}
		}
		.swiper {
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			
		}
		.list_user_avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin: 0 auto;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
		.list_user_nickname{
			font-size: 34rpx;
			font-weight: 500;
			color: #37393A;
			line-height: 48rpx;
			margin-top: 15rpx;
		}
		.list_user_label {
			font-size: 26rpx;
			font-weight: 400;
			color: #767676;
			line-height: 40rpx;
			margin-top: 10rpx;
		}
		.list_user_demand {
			font-size: 40rpx;
			font-weight: 500;
			color: #2C2C2C;
			line-height: 48rpx;
			margin-top: 30rpx;
			min-height: 96rpx;
		}
		.list_user_follow {
			background: #FFE103;
			border-radius: 50rpx;
			padding: 20rpx 0;
			font-size: 36rpx;
			font-weight: bold;
			color: #1C211D;
			line-height: 48rpx;
			width: 320rpx;
			margin: 30rpx auto 0;
		}
		.user-push-content {
			.user-push-tit {
				font-size: 46rpx;
				font-weight: bold;
			}
			.user-push-tip {
				font-size: 36r;
				font-weight: bold;
				margin-top: 10rpx;
				color: #D50403;
			}
			.user-push-list {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-gap: 30rpx 10rpx;
				margin-top: 50rpx;
				.user-push-info {
					display: inline-block;
					width: 102rpx;
					.user-push-avatar {
						image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}
					}
					.user-push-name {
						overflow: hidden;
						white-space: nowrap;
					}
				}
				
			}
			.user-push-btn {
				background: #FFE103;
				border-radius: 50rpx;
				padding: 20rpx 0;
				font-size: 42rpx;
				font-weight: bold;
				color: #1C211D;
				line-height: 48rpx;
				width: 320rpx;
				margin: 50rpx auto 0;
			}
		}
		// 推荐用户添加微信
		.recommend-user-wx-swiper {
			width: 100%;
			height: 100%;
			position: relative;
			margin-top: 45rpx;
			.recommend-user-wx-swiper-item {
				.recommend-user-wx-content {
					.recommend-user-wx-avatar {
						image {
							width: 130rpx;
							height: 130rpx;
							border-radius: 50%;
						}
					}
					.recommend-user-wx-name {
						margin-top: 20rpx;
						font-size: 46rpx;
						font-weight: 550;
						text-align: center;
					}
					.recommend-user-wx-label {
						margin-top: 10rpx;
						font-size: 36rpx;
						text-align: center;
					}
					.recommend-user-wx-add {
						width: 70%;
						font-size: 36rpx;
						margin: 50rpx auto 0;
						padding: 15rpx;
						background-color: #05C436;
						color: #fff;
						border-radius: 50rpx;
					}
					.recommend-user-wx-more {
						width: 70%;
						font-size: 36rpx;
						margin: 20rpx auto 0;
						padding: 15rpx;
						background-color: #FEE205;
						color: #000;
						border-radius: 50rpx;
					}
				}
			}
		}
		// 推荐用户添加微信end
	}
}
// 展示用户手机号/微信弹窗
.popup_user_contact {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 35;
	display: flex;
	align-items: center;
	justify-content: center;
	.popup_user_contact_c { 
		width: 480rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		.popup_user_contact_h {
			padding: 30rpx 30rpx 80rpx;
			border-bottom: 1rpx solid #DDDDDD;
			.popup_user_contact_t {
				font-size: 36rpx;
				font-weight: 550;
				color: #2C332D;
			}
			.popup_user_contact_u{
				font-size: 32rpx;
				font-weight: 550;
				color: #323232;
				margin-top: 32rpx;
				text {
					color: #F73D3B;
				}
			}
		}
		.popup_user_contact_b {
			padding: 20rpx 0;
			text-align: center;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.popup_user_contact_close {
				font-size: 28rpx;
				font-weight: 400;
				color: #666764;
				line-height: 40rpx;
				flex: 1;
			}
			.popup_user_contact_copy {
				font-size: 28rpx;
				font-weight: 400;
				color: #323232;
				line-height: 40rpx;
				border-left: 1rpx solid #DDDDDD;
				flex: 1;
			}
		}
	}
}
// 展示用户手机号/微信弹窗end
// VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 35;
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	z-index: 35;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	.user_vip_close {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}
// VIP弹窗end
</style>
